<template>
  <el-form ref="formRef" :model="form" label-position="top" :label-width="140">
    <div class="v-title my-3">报废信息</div>
    <div class="grid grid-cols-2 gap-x-3">
      <div>
        <strong>sku: </strong> {{ form.sku }}
      </div>
      <div>
        <strong>报废数量: </strong> {{ form.process_num }}
      </div>
    </div>
    <div class="v-title my-3">退款信息</div>
    <div class="border">
      <div class="grid grid-cols-12 border-b" style="background-color: #F6FAFF;">
        <div class="col-span-2 p-2">采购单号</div>
        <div class="p-2">产品单价</div>
        <div class="p-2">运费分摊</div>
        <div class="p-2">优惠分摊</div>
        <div class="p-2">入库金额</div>
        <div class="p-2">未到货金额</div>
        <div class="p-2">不良品金额</div>
        <div class="col-span-2 p-2"><span class='text-red-600 mr-1'>*</span>申请退款金额</div>
        <div class="col-span-2 p-2">申请退运费</div>
      </div>
      <div class="grid grid-cols-12 self-center items-center">
        <div class="col-span-2 p-2">
          <el-link type="primary">{{ form.purchase_no }}</el-link>
        </div>
        <div class="p-2">{{ form.unit_price }}</div>
        <div class="p-2">{{ form.tracking_price }}</div>
        <div class="p-2">{{ form.discount_price }}</div>
        <div class="p-2">{{ form.inbound_price }}</div>
        <div class="p-2">{{ form.wait_deliver_price }}</div>
        <div class="p-2">{{ form.reject_price }}</div>
        <div class="col-span-2 p-2">
          <el-form-item label="" prop="apply_refund_price" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]"
            class="m-0">
            <el-input-number v-model="form.apply_refund_price" controls-position="right" :min="0" :step="0.01"
              :precision="2" class="w-full" />
          </el-form-item>
        </div>
        <div class="col-span-2 p-2">
          <el-input-number v-model="form.aaa" controls-position="right" :min="0" :step="0.01" :precision="2"
            class="w-full" />
        </div>
      </div>
    </div>

    <div class="mt-3">
      <strong>供应商: </strong> {{ form.supplier_name }}
    </div>
    <div class="grid grid-cols-2 gap-x-3 mt-3">
      <el-form-item label="收款方式" prop="refund_method" :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
        <el-select v-model="form.refund_method" filterable class="w-full" placeholder="请选择">
          <el-option v-for="(d, i) in options.refund_method" :key="i" :label="d.label" :value="d.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="收款账号" prop="refund_account" :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
        <el-input v-model="form.refund_account" placeholder="请输入" class="w-full" />
      </el-form-item>
    </div>
    <el-form-item label="退款交易号">
      <el-input v-model="form.logistics_number" placeholder="退款交易号" class="w-full" />
    </el-form-item>
    <el-form-item label="退款备注">
      <el-input v-model="form.remark" placeholder="退款备注" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }" />
    </el-form-item>
      <VUpload v-model="form.refund_voucher" title="退款凭证" />
  </el-form>
</template>

<script setup>
import api from '../../api'
const props = defineProps({
  modelValue: { type: Object, default: () => ({}) },
  options: { type: Object, default: () => ({}) },
})
const emit = defineEmits(['update:modelValue'])
const form = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  }
})
const formRef = ref()
const validate = async () => await formRef?.value.validate(res => res)

const { a_id, ps_id } = props.modelValue
api.getSku({ a_id, ps_id }).then(res => {
  form.value = Object.assign(form.value, res.data)
  if(props.options.refund_account?.length) {
    form.value.refund_account = props.options.refund_account[0].value
  }
})

defineExpose({ validate })
</script>